WordPressにFacebookのlike（イイネ）ボタンとmixiチェックボタンをつけてみた

最近、mixiチェックという新機能がリリースされました。自分が気に入ったサイトやニュースを見つけた時に「チェック」ボタンを押すと、つながっている友だちにそのサイトのタイトルとURLなどを教えられるというサービスです。

これはFacebookの「イイネ！（Like！）」ボタンを模したもの。twitterで言えば、気に入ったサイトをツイートするようなものです。下のようなボタンがコンテンツの下部や上部に並んでいるのを見たことがある方もいらっしゃるのでは。

対応しているブログやサイトもちょこちょこ見かけていて、気になっていたので、自分のブログにも導入してみることにしました。

Facebookのイイネボタンをつける方法

【簡単】WordpressにFacebookのLike(いいね)ボタンを設置する方法 | Last Day. jpを参考にさせていただきました。

まずは、アプリケーションを作成 – Facebook開発者で登録をすませます

なんか日本語がおかしいですが、この最後の「アプリの秘訣」がApp IDです。Wordpressのプラグインを動かすのに必要となるのでコピーしておきましょう。このApp IDはFacebook | 開発者で確認することが出来ます。

次に、WordPress › Facebook Like Button « WordPress Pluginsをpluginフォルダにインストールして、プラグインを有効化すると、Wordpressのサイドバーに「Facebook Like」というタブが作られます。

そこを開いて設定します。

AppID for XFBML versionのところと、Admin IDのところに、先程コピーしたApp IDを入れます。後は自分の好みで設定してください。私は単体記事のみ表示させたいので、「Show in Posts」にチェックを入れ、位置はコンテンツの下がいいので「After Content」を「Left」に。

Facebookのイイネボタンの設置はたったこれだけ。反映されるまでちょっとだけ待つ必要がありますが非常に簡単。このイイネボタンを押すと

こんな風に誰が「イイネ！」と言ってくれたのか一目瞭然。Facebook上でもつながっている人たちのトップに最新情報として、誰がどんなサイトを「イイネ」と言ったのかが掲載されます。

mixiチェックボタンをつける方法

mixiチェックをWordpressに導入してみた | ueblogを参考にさせていただきました。

まずはmixiでも同様に開発者登録をしなければいけません。「設定変更」→「その他変更」から「[mixi] Developer登録」を行ってください。名前や住所、携帯アドレス等を登録すると、携帯（iPhone）にDeveloper登録メールが届くのでURLをクリックして完了。

Developer dashboardにアクセスして、上部の「mixi Plugin」の方をクリック。新規サービス追加で自分のサイトを登録します。

サービス名、URL、URL許可リストを登録するのですが、ここをちゃんとしておかなくて私は「不正な投稿内容のため、チェックできません。」を言われて悪戦苦闘しちゃいました。ご注意を。

ま、単に「www」をつけるのを忘れていただけなのですが…。そうすると認証情報として「チェックキー」が発行されるのでこれをコピーしておきます。

後は簡単。Downloads for takimo’s mixi-check-for-wordpress – GitHubでmixiチェックのプラグインをダウンロードして、pluginフォルダにインストールして有効化。

facebookプラグインと同様に、サイドバーにタブができるので、そこをクリックして、チェックキーを入れます。後はどんなボタンにするか決定して保存。そして、埋め込みコードをクリック。

そこに書いてある通り、header.phpとsingle.phpを編集して、埋め込みコードを追加しておきます。

single.phpの入れる位置としては、

<?php		the_content('続きを読む >>'); ?>
</div>

の下あたりに

<!-- mixiボタン-->
<?php get_the_mixi_check_button_code(); ?>
<!-- mixiボタンend-->

と入れておくのがベストかと。

wp.vicunaのテーマを利用している場合、ボタンのborderがついてしまうので、wp.vicunaフォルダ内の style-flat>subSkin>1-subSkin.cssに「Link img」を指定しているところがあるので、そこに

div.entry a img {
	border: none;
}
div.entry a:hover img {
	border: none;
}

としておきました。

これでこの記事の下にちゃんと表示されているはずです。このブログと色んなソーシャルサービスがつながっていくのが楽しみです。